package com.example.exp3

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.clickable
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource
import androidx.annotation.DrawableRes

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GalleryPrototypeApp()
        }
    }
}

/* ---------- 数据模型 ---------- */
data class Artwork(
    val title: String,
    val artist: String,
    val year: Int,
    @param:DrawableRes val imgId: Int   // 改为 @param
)

/* ---------- 假数据 ---------- */
val sampleArts = listOf(
    Artwork("Still Life of Blue Rose and Other Flowers", "Owen Scott", 2021, R.drawable.flower),
    Artwork("Monochrome City", "Lena Chen", 2022, R.drawable.city),
    Artwork("Abstract Lines", "Kenji Tanaka", 2020, R.drawable.lines)
)

/* ---------- 主界面 ---------- */
@Composable
fun GalleryPrototypeApp() {
    var index by remember { mutableIntStateOf(0) }
    val current = sampleArts[index]                     // ② 派生状态

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        /* ① 图片区域 */
        Box(
            modifier = Modifier
                .weight(1f)                             // 竖向撑满
                .fillMaxWidth()
                .border(BorderStroke(2.dp, Color.Black), RoundedCornerShape(8.dp))
                .background(Color(0xFFF9F9F9)),
            contentAlignment = Alignment.Center
        ) {
            // 占位符（黑白线稿风格）
            Image(
                painter = painterResource(id = current.imgId),   // 关键一行
                contentDescription = "Artwork",
                modifier = Modifier
                    .fillMaxWidth(0.8f)
                    .aspectRatio(1f)
                    .border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
            )

            // 右上角时间
            Text(
                "12:00",
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(12.dp)
                    .border(1.dp, Color.Black)
                    .background(Color.White)
                    .padding(horizontal = 8.dp, vertical = 4.dp),
                fontSize = 14.sp
            )
        }

        Spacer(Modifier.height(24.dp))

        /* ② 文字信息 */
        Text(
            text = current.title,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center
        )
        Spacer(Modifier.height(8.dp))
        Text(
            text = "${current.artist} (${current.year})",
            fontSize = 16.sp,
            color = Color.Gray
        )

        Spacer(Modifier.height(24.dp))

        /* ③ 导航按钮 */
        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            NavCircleButton(icon = "◀") {
                index = (index - 1 + sampleArts.size) % sampleArts.size
            }
            NavCircleButton(icon = "▶") {
                index = (index + 1) % sampleArts.size
            }
        }
    }
}

/* ---------- 圆形按钮 ---------- */
@Composable
private fun NavCircleButton(icon: String, onClick: () -> Unit) {
    Box(
        modifier = Modifier
            .size(40.dp)
            .clip(CircleShape)
            .border(2.dp, Color.Black, CircleShape)
            .background(Color.White)
            .clickable { onClick() },
        contentAlignment = Alignment.Center
    ) {
        Text(icon, fontSize = 16.sp, color = Color.Black)
    }
}

@Preview(showBackground = true)
@Composable
private fun GalleryPrototypePreview() {
    GalleryPrototypeApp()
}